<template>
  <view class="container">
    <view class="title">功能1：选择本机图片并预览</view>
    <button class="btn" @click="chooseImage">点击选择图片</button>
    
    <!-- 预览选中的图片 -->
    <view v-if="imageUrl" class="preview-container">
      <text class="preview-tip">预览图片：</text>
      <image 
        :src="imageUrl" 
        class="preview-img" 
        mode="widthFix" 
        @click="previewImage"
      />
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 存储选中图片的临时路径
const imageUrl = ref('');

// 选择本机图片
const chooseImage = () => {
  // 调用UniApp选择图片API
  uni.chooseImage({
    count: 1, // 最多选择1张图片
    sizeType: ['original', 'compressed'], // 允许原图/压缩图
    sourceType: ['album', 'camera'], // 允许从相册/相机选择
    success: (res) => {
      // 选择成功后，获取临时路径
      imageUrl.value = res.tempFilePaths[0];
      console.log('选中图片路径：', imageUrl.value);
    },
    fail: (err) => {
      console.error('选择图片失败：', err);
      uni.showToast({ title: '选择失败', icon: 'none' });
    }
  });
};

// 预览图片（点击图片时触发）
const previewImage = () => {
  if (!imageUrl.value) return;
  // 调用UniApp预览图片API
  uni.previewImage({
    current: imageUrl.value, // 当前预览的图片路径
    urls: [imageUrl.value], // 需要预览的图片数组（支持多张）
    loop: true // 支持循环预览
  });
};
</script>

<style scoped>
.container {
  padding: 30rpx;
}
.title {
  font-size: 34rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
  color: #333;
}
.btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 10rpx;
  font-size: 30rpx;
}
.preview-container {
  margin-top: 30rpx;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
}
.preview-tip {
  font-size: 28rpx;
  color: #666;
  display: block;
  margin-bottom: 15rpx;
}
.preview-img {
  width: 100%;
  border-radius: 8rpx;
}
</style>